<template>
  <div class="user">
    <div class="top">
      <div class="info">
        <div class="img" @click="toinfo">
          <img :src="userinfo.photo" alt="" />
        </div>
        <div class="item">
          <div class="name">{{ userinfo.name }}</div>
          <span class="items">申请认证</span>
        </div>
        <div class="reading">
          <div class="img">
            <img src="../../../assets/yudu@2x.png" alt="" />
          </div>
          <div class="Today">
            <span>今日阅读</span>
            <span class="time">5分钟</span>
          </div>
        </div>
      </div>
      <div class="my">
        <div class="myinfo">
          <span class="num">{{ userinfo.art_count }}</span>
          <span class="dynamic">动态</span>
        </div>
        <div class="myinfo">
          <span class="num">{{ userinfo.follow_count }}</span>
          <span class="dynamic">关注</span>
        </div>
        <div class="myinfo">
          <span class="num">{{ userinfo.fans_count }}</span>
          <span class="dynamic">粉丝</span>
        </div>
      </div>
    </div>
    <div class="works">
      <div class="items" @click="tocollection(0)">
        <div class="item acvtr">
          <img src="../../../assets/收藏@2x.png" alt="" />
          <span>收藏</span>
        </div>
      </div>
      <div class="items">
        <div class="item acvtr" @click="tocollection(1)">
          <img src="../../../assets/历史比赛@2x.png" alt="" />
          <span>历史</span>
        </div>
      </div>
      <div class="items">
        <div class="item" @click="$router.push('/works')">
          <img src="../../../assets/作品@2x.png" alt="" />
          <span>作品</span>
        </div>
      </div>
    </div>
    <div class="content">
      <van-cell-group>
        <van-cell title="消息通知" is-link />
        <van-cell title="实名认证" is-link />
      </van-cell-group>
    </div>
    <div class="content">
      <van-cell-group>
        <van-cell title="小智同学" is-link @click="$router.push('/chat')" />
        <van-cell title="退出登录" is-link @click="tologin" />
      </van-cell-group>
    </div>
    <div class="mycontent"></div>
  </div>
</template>

<script>
import { getInfo } from '../../../api/user'
// 导入令牌
import { removeToken } from '@/util/token'
import { mapMutations } from 'vuex'
export default {
  name: 'user',
  data () {
    return {
      // 用户信息
      userinfo: {}
    }
  },
  async created () {
    const res = await getInfo()
    // console.log(res)
    this.userinfo = res.data.data
  },
  // 点击跳转修改个人页面
  methods: {
    // vuex辅助函数
    ...mapMutations(['setIslogin', 'setUser']),
    // 点击跳转历史或者收藏
    tocollection (item) {
      this.$router.push(`/collection/${item}`)
    },
    // 点击退出
    tologin () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否退出登录？'
        })
        .then(() => {
          this.$router.push('/login')
          removeToken()
          this.setLogin(false)
          this.setUser('')
        })
        .catch(() => {
          // on cancel
        })
    },
    toinfo () {
      this.$router.push('/info')
    }
  }
}
</script>

<style lang="less" scoped>
.user {
  background-color: #f5f7f9;
  .top {
    height: 183px;
    background: #3296fa;
    .info {
      padding: 40px 0px 28px 20px;
      display: flex;
      justify-content: space-between;
      color: #fff;
      .img {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item {
        padding-right: 79px;
        .name {
          margin-top: 10px;
          font-size: 15px;
          font-weight: 400;
        }
        .items {
          font-size: 10px;
          font-weight: 700;
          padding: 3px 9px;
          background-color: #fff;
          color: #3296fa;
          border-radius: 10px;
        }
      }
      .reading {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        width: 94px;
        height: 43px;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.2);
        color: #ffffff;
        border-radius: 20px 0 0 20px;
        .img {
          padding: 12px 5px 0px 12px;
          width: 16px;
          height: 17px;
        }
        .Today {
          padding-top: 10px;
          padding-right: 12px;
          display: flex;
          line-height: 15px;
          flex-direction: column;
          .time {
            padding-left: 5px;
            padding-bottom: 7px;
          }
        }
      }
    }
    .my {
      display: flex;
      .myinfo {
        flex: 1;
        text-align: center;
        color: #fff;
        display: flex;
        flex-direction: column;
        .num {
          font-size: 18px;
        }
        .dynamic {
          padding-top: 9px;
          font-size: 12px;
        }
      }
    }
  }
  .works {
    background-color: #fff;
    display: flex;
    .items {
      flex: 1;
      text-align: center;
      padding-bottom: 10px;
      .acvtr {
        border-right: 1px solid #edeff3;
      }
      .item {
        margin-top: 10px;

        display: flex;
        flex-direction: column;
        img {
          width: 23px;
          height: 23px;
          margin: 3px auto 6px;
        }
        span {
          font-size: 14px;
          color: #333333;
        }
      }
    }
  }
  .content {
    padding-left: 10px;
    background-color: #fff;
    margin-top: 5px;
    .van-cell {
      height: 55px;
      .van-cell__title {
        line-height: 35px;
      }
      .van-icon {
        line-height: 35px;
      }
    }
  }
  .mycontent {
    background-color: #fff;
    height: 60px;
    margin-top: 5px;
  }
}
</style>
